<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>商圈首页</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" type="text/css" href="../css/nctouch_common.css">
    <style>
        body{background: #f5f5f5}
        .header{
            position: relative;
            box-sizing: border-box;
            line-height: 45px;
        }
        .header input {
            height: 32px;
            vertical-align: top;
            margin-top: 5px;
            width: 68%;
            padding-left: 28px;
            border-radius: 0;
            box-sizing: border-box;
            border-color: #cccccc;
            font-size: 0.7rem;
            background: url("../images/ionc.png") no-repeat 5px -314px;
            background-size: 512px ;
        }
        .header i{
            height: 40px;
            width: 40px;
            display:block;
            float: left;
            background: url("../images/dianpuSet.png") no-repeat 0 5px;
            background-size: 512px;
        }
        .header .set{
            position: absolute;
            width: 50px;
            height: 30px;
            right: 10px;
            top:0;
            text-align: center;
            line-height: 30px;
            font-size: 13px;
            padding-left: 0;
            border: none;
            background: url("../images/xiajiantou.png") no-repeat 100%;
            background-size: 14px;
        }
        .main_top{
            font-size: 0.65rem;
            overflow: hidden;
            padding: 15px 0;
            background: #ffffff;
            border-top: 1px solid #cccccc;
        }
        .main_top a {
             color: #000;
        }
        .main_top ul li{
            width: 25%;
            box-sizing: border-box;
            text-align: center;
            float: left;
        }
        .main_top ul li:first-child i{
            margin: 0 auto;
            width: 50px;
            height: 50px;
            display: block;
            background: url("../images/sqicon.png") no-repeat 0px 0;
            background-size: 380px;
            box-sizing: border-box;
        }
        .main_top ul li:nth-child(2) i{
            margin: 0 auto;
            width: 50px;
            height: 50px;
            display: block;
            background: url("../images/sqicon.png") no-repeat -110px 0 ;
            background-size: 380px;
            box-sizing: border-box;
        }
        .main_top ul li:nth-child(3) i{
            margin: 0 auto;
            width: 50px;
            height: 50px;
            display: block;
            background: url("../images/sqicon.png") no-repeat -220px 0 ;
            background-size: 380px;
            box-sizing: border-box;
        }
        .main_top ul li:nth-child(4) i{
            margin: 0 auto;
            width: 50px;
            height: 50px;
            display: block;
            background: url("../images/sqicon.png") no-repeat -330px 0 ;
            background-size: 380px;
            box-sizing: border-box;
        }
        .main_top ul li p{
            margin-top: 5px;
        }
        .main_center{
            font-size: 0.6rem;
            margin-top:10px ;
            height: 150px;
            overflow: hidden;
            position: relative;
        }
        .main_center span{
            position:absolute ;
            width: 80px;
            top:8px;
            left:0;
            background: url("../images/yello.png") no-repeat;
            background-size: 100% 100%;
            font-size: 0.5rem;
            padding:2px 0 2px 10px;
            box-sizing: border-box;
            z-index: 2;
        }
        .main_center p{
            width: 100%;
            position: absolute;
            bottom: 0px;
            height: 25px;
            line-height: 25px;
            background: rgba(0,0,0,.3);
            color: #ffffff;
            text-align: center;
            padding: 1px 0 5px;
        }
        .main_center_left{
            width: 50%;
            box-sizing: border-box;
            float: left;
            position: relative;
        }
        .main_center_left img{
            width: 100%;
            height: 100px;
        }
        .main_center_right{
            position: relative;
            padding-left: 1px;
            width: 50%;
            box-sizing: border-box;
            float: left;
        }
        .main_center_right img{
            width: 100%;
            height: 100px;
        }
        .bot h5{
            margin-top: 10px;
           background: #ffffff;
            font-weight: 500;
            font-size: 0.7rem;
            padding: 6px 0 6px 10px;
            box-sizing: border-box;
            border-bottom: 1px solid #cccccc;
        }
        .list {
            overflow: hidden;
            font-size: 0.65rem;
            padding: 15px 12px 15px 10px ;
            border-bottom: 1px solid #cccccc;
            background: #ffffff;
        }
        .list img{
            width: 70px;
            float: left;
            padding-right: 10px;
            box-sizing: border-box;
        }
        .list ul li{
            margin-top: 7px;
        }
        .list ul li:first-child{
            margin-top: -5px;
            background: url("../images/pic2.png") no-repeat 100%;
            background-size:16px ;
            padding-right: 15px;
        }
        .list ul li:nth-child(2){
            color: #777777;
            font-size: 0.6rem;
        }
        .list ul li .money{
            padding-right: 12px;
            color: red;
        }
        .list a {
             color: #0e0e0e;
        }
        #list_con p { line-height: 400px; text-align: center; font-size: 13px; color: #666;}
        .list ul li strong{
            color: #777777;
            font-size: 0.6rem;
           float: right;
           font-weight: 300;
        }
        del{
            color: #777777;
        }
        @media screen and (max-width: 320px) {
            .header input{
                width: 63%;
            }
        }
        #areaSelected{
            z-index:10000;
        }

        .distans {
            float: right;
            font-size: 12px;
            color:#666;
        }
        .swipe {
            height: 150px;
            overflow: hidden;
            position: relative;
        }
        .swipe-wrap {
            height: 150px;
            overflow: hidden;
            position: relative;
        }
        .swipe-wrap > div {
            height: 150px;
            float:left;
            width:100%;
            position: relative;
        }
        .tel {
            float: right;
            padding-left: 20px;
            height: 20px;
            line-height: 20px;
            color: #ff6666;
            background: url("../images/tel.png") no-repeat;
        }
        .nav { display: inline-block; width:25px; height: 25px; float: right; background: url("../images/nav.png")}
        .map_decation {width: 100%; height: 120px; background: #fcfcfc; position: fixed; border-top: 1px solid #ccc; box-shadow: 1px 1px 1px 1px #ccc; bottom:-120px;transition: .5s;
            -moz-transition:  .5s;	/* Firefox 4 */
            -webkit-transition:  .5s;	/* Safari 和 Chrome */
            -o-transition: .5s;	/* Opera */}
        .map_tit { width: 95%; height: 30px; line-height: 30px; padding-left: 5%; font-size: 14px; border-bottom: 1px solid #ccc; margin-bottom: 10px;}
        .map_decation p { width: 90%; height: 30px; line-height: 30px; padding-left: 10%; font-size: 14px;}
        .map_decation p a { color: #000;}
        .close { display: inline-block; float: right; width: 25px; height: 25px; background: url("../images/close_window.png");background-size: 100% 100%; margin-top: 2px;}
        .map_decation p span { font-size: 13px; color: #ff6666;}
        .no-data { width: 100%; height: 400px; text-align: center; background: url("../images/nodat.png") center center no-repeat; line-height: 480px; color: #666;}
        .nodata { display: none; width: 100%; height: 30px; font-size: 13px; text-align: center; line-height: 30px; color: #666;}
        .list_loading{height:16px;padding:20px 0 30px;text-align:center}.list_loading i{height:16px;width:16px;display:inline-block;background:url('../images/icons.png') no-repeat -288px -16px;background-size:500px 500px;margin-right:10px;vertical-align:middle;-webkit-animation:loading 1s infinite linear;-ms-animation:loading 1s infinite linear;-o-animation:loading 1s infinite linear;-moz-animation:loading 1s infinite linear;animation:loading 1s infinite linear}.list_loading span{height:16px;display:inline-block;line-height:16px;vertical-align:middle;color:#A0A0A0}@-webkit-keyframes loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
        .swipe-wrap > div img { width: 100%; height: 150px;}
        .yh { display: inline-block; vertical-align: middle; margin-right: 5px; width: 20px;
            height:20px; background: url("../images/youhui.png"); background-size: 100% 100%;}
    </style>
</head>
<body>
<div class="header">
    <i onclick="window.history.back(-1)"></i>
    <input type="text" placeholder="搜索"/>
    <input id="area_info" type="text" class="set" readonly=""  value="武汉">
</div>
<div class="main" style="margin-top: 1px">
    <div class="main_top" id="class-box">
    </div>
    <div class="main_center" id="swipe">
    </div>
    <div class="bot">
        <h5>附近商家</h5>
        <div id="list_con">

        </div>
    </div>
</div>
<div id='container' style="display: none;"></div>
<div class="list_loading" style="display: none"><i></i><span>努力加载中...</span></div>
<div class="nodata">更多商家等待入驻</div>
</body>
</html>

<script type="text/html" id="class">
<ul>
    <% for(i in class_data) { %>

       <li>
           <a href="product_list.html?store=business&cate=<%= class_data[i]['gc_id']%>">
         <i></i>
         <p><%= class_data[i]['gc_name']%></p>
           </a>
      </li>
    <% } %>
</ul>
</script>
<script type="text/html" id="banner">
    <div id='slider' class='swipe'>
        <div class='swipe-wrap'>
            <% for(i in banner) { %>
            <div>
                <img src="<%=banner[i]['pic'] %>" alt="">
                <p><%=banner[i]['title'] %></p>
            </div>
            <% } %>
        </div>
    </div>
</script>
<script type="text/html" id="store">
    <% for(i in business_store) { %>
    <div class="list" data-id="<%= business_store[i]['store_id'] %>">
        <a href="product_list.html?store=business&sid=<%= business_store[i]['store_id'] %>" style="display: inline-block; height:100%">
        <% if(business_store[i]['store_avatar']) { %>
           <img src="<%=SITEURL%>/data/upload/shop/store/<%= business_store[i]['store_avatar'] %>" alt=""/>
        <% }else{ %>
           <img src="<%=SITEURL%>/data/upload/shop/common/default_store_avatar.png" alt=""/>
        <% } %>
        </a>
        <ul style="display:inline-block; width:75%">
            <li><a href="product_list.html?store=business&sid=<%= business_store[i]['store_id'] %>"> <%= business_store[i]['store_name'] %> <% if(business_store[i]['store_tel']!=0) { %></a><a href="tel:<%= business_store[i]['store_tel'] %>" class="tel
            "><%= business_store[i]['store_tel'] %></a> <% }%></li>
            <li> <a href="product_list.html?store=business&sid=<%= business_store[i]['store_id'] %>"><% if(business_store[i]['store_address'] ) { %><%= business_store[i]['store_address'] %><% }else { %> 该店铺暂时没有填写地址 <%}%> </a></li>
            <li><span class="money"><i class="yh"></i>已售  <%= business_store[i]['salenum'] %></span> <span class="distans"><% if(business_store[i]['store_address'] ) { %>正在计算中 <%}%></span> <% if(business_store[i]['store_address'] ) { %><span class="nav" onclick="nav(this)" data-address="<%= business_store[i]['store_address'] %>" ></span><% } %></li>
        </ul>
    </div>
    <% } %>
</script>
<div class="map_decation">
    <div class="map_tit">选择导航 <a href="javascript:;" class="close" onclick="closeNav()"></a></div>
    <p onclick="mapnavigation(0)"><a href="javascript:;">百度导航</a> <span>(请确认手机上装有百度地图app)</span></p>
    <p onclick="mapnavigation(1)"><a href="javascript:;">高德导航</a> <span>(请确认手机上装有高德地图app)</span></p>
</div>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/template.js"></script>
<script type="text/javascript" src="../js/swipe.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=72833a453aa4648217a885ea41151088"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="../js/tmpl/business_store.js"></script>
